<template>
	<view>
		 <u-swiper
				height="200"
				:list="slides"
				indicator
				indicatorMode="line"
				circular
				@click="click"
				keyName="img_url"
    ></u-swiper>
		<u-tabs sticky :list="sortList" @click="clickSort" lineColor="#d81e06" inactiveStyle="#000" itemStyle="line-height: 44px;font-weight: bold;"></u-tabs>
		
		<view class="">
			<u-row customStyle="margin-bottom: 20px;flex-wrap: wrap;" v-show="goods.length">
				<u-col span="6" v-for="good in goods" :key="good.id">
					<good-card :good="good"></good-card>
				</u-col>
			</u-row>
			<u-row customStyle="margin-top: 20px;margin-left: 4.5%;flex-wrap: wrap;" v-show="!goods.length">
				<u-col span="6" v-for="(item, index) in 6" :key="index" style="margin-bottom: 20rpx;">
					<u-skeleton
						rows="3"
						:title="false"
						:rowsWidth="['90%', '90%', '90%']"
						:rowsHeight="['190', '18', '18']"
						loading
					></u-skeleton>
				</u-col>
			</u-row>
			<u-loadmore :status="status" />
			
		</view>
	</view>
</template>

<script>
	import { getIndex, postMenu, getMenu, authLogin } from '@/config/api.js';
	export default {
		data() {
			return {
				currentSort: 0,
				status: 'loadmore',
				sortList: [{
					name: '全部'
				}, {
					name: '热销'
				}, {
					name: '推荐'
				}, {
					name: '最新'
				}],
				imgList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				slides: [],
				goods: [],
				page: 1
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			clickSort(item) {
				if(this.currentSort !== item.index) {
					this.currentSort = item.index
					// 重置商品数据和分页
					this.goods = []
					this.page = 1

					this.getData()
				}
			},
			async getData() {
				// if(this.page >= 3) {
				// 	this.status = 'nomore';
				// 	return
				// }
				const params = {
					page: this.page
				}

				// 判断筛选条件
				if(this.currentSort === 1) {
					params.sales = 1
				} else if(this.currentSort === 2) {
					params.recommend = 1
				} else if(this.currentSort === 3) {
					params.new = 1
				}
				
				this.status = 'loading';
				let res = await getIndex({ params });

				// if(this.page >= 3) this.status = 'nomore';
				// else this.status = 'loading';
				// 这里虽然重新赋值，但是因为vue虚拟dom，并不会重新渲染
				this.slides = res.slides
				this.goods = [...this.goods, ...res.goods.data]
				// this.$forceUpdate();
			},
			async getData1() {
				// 发出post，假设需要带上token
				postMenu({ custome: { auth: true }}).then((res) => {
					console.log(res)
				}).catch(() =>{
					
				})

				// await等待，注意与async结合使用
				await postMenu({ custome: { auth: true }})

				// 假设不需要在响应拦截器中自动弹出的toast，以及不想写catch(如果promise中进行reject，但是却没有catch的话会报错)
				postMenu({ custome: { auth: true, toast: false, catch: false }}).then(() => {
					
				})

				// 也可以直接通过uni.$u.post发出请求，注意此处需要写上接口地址
				uni.$u.http.post('/common/menu', { custome: { auth: true }}).then(() => {
					
				}).catch(() =>{
					
				})

			}
		},
		onReachBottom() {
			if(this.goods.length) {
				// 重新请求数据，带上分页参数
				this.page = this.page + 1
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
